<template>
    <div :class="containerClass">
        <a
            href="#"
            @click.prevent="make()"
            :class="currentBtnClass">
            <i aria-hidden="true" class="fa fa-heart-o"></i>
            <slot name="title">收藏</slot>
        </a>
        <a
            href="#"
            v-if="descHidden"
            @click.prevent="make()"
            :class="currentDescClass">
            <i aria-hidden="true" class="fa fa-heart-o"></i>
            <slot name="pre-desc">

            </slot>
            {{favoriteCount}}
            <slot name="last-desc"></slot>

        </a>

    </div>

</template>

<script>
    export default {

        props: {
            containerClass: {default: 'btn-group btn-group-sm align-items-center'},
            action: {required: true, type: String},
            checkedBtnClass: {default: 'btn btn-secondary'},
            btnClass: {default: 'btn btn-outline-secondary'},
            checkedDescClass: {default: 'btn btn-outline-secondary'},
            descClass: {default: 'btn btn-secondary'},
            descHidden: {default: true},

        },
        data() {
            return {
                favoriteCount: 0,
                isFavorite: false,
                user: '',
            }
        },
        mounted: function () {
            this.make(false);
        },
        computed: {
            currentBtnClass() {
                return this.isFavorite ? this.checkedBtnClass : this.btnClass
            },
            currentDescClass() {
                return this.isFavorite ? this.checkedDescClass : this.descClass
            },
        },
        methods: {
            async make(click = true) {
                let url = window.location.href;
                let post = {preUrl: url, click};

                let {favoriteCount, isFavorite, route} = await this.axios.post(this.action, post);
                if (route && click) {
                    location.href = route;
                    return;
                }
                this.favoriteCount = favoriteCount;
                this.isFavorite = isFavorite;
            },
        },
    };
</script>

<style>
</style>
